import React from "react";
import Link from "next/link";
import { Icon, Tag } from "antd";

import style from "./index.module.scss";
import { useRouter } from "next/router";

export const Tags = ({ tags = [] }) => {
  const router = useRouter();
  const { tag: param } = router.query;
  return (
    <div className={style.wrapper}>
      <div className={style.head}>
        <Icon type="tags" />
        <span>标签</span>
      </div>
      <ul className={style.list}>
        {tags.map((item) => (
          <li
            key={item.id}
            className={param === item.value ? style.active : null}
          >
            <Link key={item.id} href={"/tags/[tag]"} as={`/tags/${item.value}`}>
              <a className={style.tag}>
                {item.label}[{item.articleCount}]
              </a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};
